{% extends "base.html" %}

{% block title %}资深推荐 - 股票推荐系统{% endblock %}

{% block content %}
<div class="main-container">
    <a href="/" class="btn btn-outline-light back-btn">
        <i class="fas fa-arrow-left"></i> 返回首页
    </a>
    
    <div class="header">
        <h1><i class="fas fa-chart-bar"></i> 资深投资工具</h1>
        <p>为资深投资者提供专业的股票分析和行业拓展建议</p>
    </div>
    
    <!-- 功能选择卡片 -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card card-custom" onclick="showModule('stock-to-stock')">
                <div class="card-body text-center">
                    <div class="feature-icon">
                        <i class="fas fa-exchange-alt"></i>
                    </div>
                    <h5 class="card-title">知股荐股</h5>
                    <p class="card-text">基于已知股票推荐相关股票，挖掘联动机会</p>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card card-custom" onclick="showModule('industry-stock')">
                <div class="card-body text-center">
                    <div class="feature-icon">
                        <i class="fas fa-industry"></i>
                    </div>
                    <h5 class="card-title">行业荐股</h5>
                    <p class="card-text">在指定行业内推荐优质股票</p>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card card-custom" onclick="showModule('industry-expansion')">
                <div class="card-body text-center">
                    <div class="feature-icon">
                        <i class="fas fa-expand-arrows-alt"></i>
                    </div>
                    <h5 class="card-title">行业拓展</h5>
                    <p class="card-text">推荐相关行业或对冲行业</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 知股荐股模块 -->
    <div id="stock-to-stock-module" class="module-content" style="display: none;">
        <div class="card card-custom">
            <div class="card-body">
                <h5 class="card-title"><i class="fas fa-exchange-alt"></i> 知股荐股</h5>
                <p class="text-muted">输入您感兴趣的股票，系统将推荐与之联动性强的其他股票</p>
                
                <!-- 参考股票列表 -->
                <div class="mb-4">
                    <h6><i class="fas fa-lightbulb"></i> 参考股票</h6>
                    <div id="referenceStocks" class="row">
                        <!-- 参考股票将在这里动态加载 -->
                    </div>
                </div>
                
                <form id="stockToStockForm">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="input_stock" class="form-label">股票代码或名称</label>
                                <input type="text" class="form-control form-control-custom" id="input_stock" placeholder="例如：sz.000001 或 平安银行">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="stock_top_n" class="form-label">推荐数量</label>
                                <input type="number" class="form-control form-control-custom" id="stock_top_n" value="5" min="1" max="20">
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-custom btn-primary">
                        <i class="fas fa-search"></i> 开始推荐
                    </button>
                </form>
                
                <div class="loading" id="stock-loading" style="display: none;">
                    <div class="spinner-border text-primary" role="status"></div>
                    <p class="mt-2">正在分析股票关联性...</p>
                </div>
                
                <div id="stock-result" style="display: none;">
                    <div class="alert alert-info" id="stock-message"></div>
                    <div class="table-responsive">
                        <table class="table table-hover result-table">
                            <thead>
                                <tr>
                                    <th>股票代码</th>
                                    <th>股票名称</th>
                                    <th>所属行业</th>
                                    <th>联动系数</th>
                                </tr>
                            </thead>
                            <tbody id="stock-table">
                            </tbody>
                        </table>
                    </div>
                    
                                            <!-- 可视化图表区域 -->
                        <div id="stock-chartContainer" class="mt-4" style="display: none;">
                            <h6><i class="fas fa-chart-bar"></i> 可视化分析</h6>
                            <div class="text-center">
                                <div id="stock-chartSvg" style="max-width: 100%; height: auto;"></div>
                            </div>
                        </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 行业荐股模块 -->
    <div id="industry-stock-module" class="module-content" style="display: none;">
        <div class="card card-custom">
            <div class="card-body">
                <h5 class="card-title"><i class="fas fa-industry"></i> 行业荐股</h5>
                <p class="text-muted">选择行业，系统将推荐该行业内的优质股票</p>
                
                <form id="industryStockForm">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="input_industry" class="form-label">行业名称</label>
                                <select class="form-control form-control-custom" id="input_industry">
                                    <option value="">请选择行业...</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="industry_top_n" class="form-label">推荐数量</label>
                                <input type="number" class="form-control form-control-custom" id="industry_top_n" value="5" min="1" max="20">
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-custom btn-success">
                        <i class="fas fa-search"></i> 开始推荐
                    </button>
                </form>
                
                <div class="loading" id="industry-loading" style="display: none;">
                    <div class="spinner-border text-success" role="status"></div>
                    <p class="mt-2">正在分析行业股票...</p>
                </div>
                
                <div id="industry-result" style="display: none;">
                    <div class="alert alert-success" id="industry-message"></div>
                    <div class="table-responsive">
                        <table class="table table-hover result-table">
                            <thead>
                                <tr>
                                    <th>股票代码</th>
                                    <th>股票名称</th>
                                    <th>所属行业</th>
                                    <th>综合评分</th>
                                    <th>平均成交额（亿元）</th>
                                    <th>波动率</th>
                                </tr>
                            </thead>
                            <tbody id="industry-table">
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 可视化图表区域 -->
                    <div id="industry-chartContainer" class="mt-4" style="display: none;">
                        <h6><i class="fas fa-chart-bar"></i> 可视化分析</h6>
                        <div class="text-center">
                                                            <div id="industry-chartSvg" style="max-width: 100%; height: auto;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 行业拓展模块 -->
    <div id="industry-expansion-module" class="module-content" style="display: none;">
        <div class="card card-custom">
            <div class="card-body">
                <h5 class="card-title"><i class="fas fa-expand-arrows-alt"></i> 行业拓展</h5>
                <p class="text-muted">基于选定行业推荐相关行业或对冲行业</p>
                
                <form id="industryExpansionForm">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="expansion_industry" class="form-label">行业名称</label>
                                <select class="form-control form-control-custom" id="expansion_industry">
                                    <option value="">请选择行业...</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="expansion_type" class="form-label">推荐类型</label>
                                <select class="form-control form-control-custom" id="expansion_type">
                                    <option value="related">相关行业</option>
                                    <option value="hedge">对冲行业</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="expansion_top_n" class="form-label">推荐数量</label>
                                <input type="number" class="form-control form-control-custom" id="expansion_top_n" value="5" min="1" max="20">
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-custom btn-warning">
                        <i class="fas fa-search"></i> 开始推荐
                    </button>
                </form>
                
                <div class="loading" id="expansion-loading" style="display: none;">
                    <div class="spinner-border text-warning" role="status"></div>
                    <p class="mt-2">正在分析行业关联性...</p>
                </div>
                
                <div id="expansion-result" style="display: none;">
                    <div class="alert alert-warning" id="expansion-message"></div>
                    <div class="table-responsive">
                        <table class="table table-hover result-table">
                            <thead>
                                <tr>
                                    <th>行业名称</th>
                                    <th>相关度分数</th>
                                </tr>
                            </thead>
                            <tbody id="expansion-table">
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 可视化图表区域 -->
                    <div id="expansion-chartContainer" class="mt-4" style="display: none;">
                        <h6><i class="fas fa-chart-bar"></i> 可视化分析</h6>
                        <div class="text-center">
                                                            <div id="expansion-chartSvg" style="max-width: 100%; height: auto;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let industries = [];

$(document).ready(function() {
    // 加载行业列表
    loadIndustries();
    
    // 加载参考股票
    loadReferenceStocks();
    
    // 绑定表单事件
    $('#stockToStockForm').on('submit', handleStockToStock);
    $('#industryStockForm').on('submit', handleIndustryStock);
    $('#industryExpansionForm').on('submit', handleIndustryExpansion);
});

function loadIndustries() {
    $.ajax({
        url: '/api/get_industries',
        method: 'GET',
        success: function(response) {
            if (response.success) {
                industries = response.data;
                populateIndustrySelects();
            }
        },
        error: function() {
            console.log('加载行业列表失败');
        }
    });
}

function loadReferenceStocks() {
    $.ajax({
        url: '/api/get_reference_stocks',
        method: 'GET',
        success: function(response) {
            if (response.success) {
                displayReferenceStocks(response.data);
            }
        },
        error: function() {
            console.log('加载参考股票失败');
        }
    });
}

function displayReferenceStocks(stocks) {
    const container = $('#referenceStocks');
    container.empty();
    
    stocks.forEach(stock => {
        const stockCard = $(`
            <div class="col-md-3 mb-2">
                <div class="card card-sm">
                    <div class="card-body p-2 text-center">
                        <small class="text-muted">${stock.股票代码}</small><br>
                        <strong>${stock.股票名称}</strong><br>
                        <small class="text-info">${stock.所属行业}</small>
                    </div>
                </div>
            </div>
        `);
        container.append(stockCard);
    });
}

function populateIndustrySelects() {
    const options = industries.map(industry => `<option value="${industry}">${industry}</option>`).join('');
    $('#input_industry, #expansion_industry').html('<option value="">请选择行业...</option>' + options);
}

function showModule(moduleName) {
    $('.module-content').hide();
    $(`#${moduleName}-module`).show();
}

function handleStockToStock(e) {
    e.preventDefault();
    
    showLoading('#stock-loading');
    $('#stock-result').hide();
    
    const formData = {
        input_stock: $('#input_stock').val().trim(),
        top_n: parseInt($('#stock_top_n').val())
    };
    
    $.ajax({
        url: '/api/stock_to_stock',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(formData),
        success: function(response) {
            hideLoading('#stock-loading');
            
            if (response.success) {
                $('#stock-message').text(response.message);
                $('#stock-table').html(formatTableData(response.data));
                $('#stock-result').show();
                
                // 显示可视化图表
                if (response.chart) {
                                            $('#stock-chartSvg').html(response.chart);
                    $('#stock-chartContainer').show();
                } else {
                    $('#stock-chartContainer').hide();
                }
            } else {
                showAlert(response.error, 'danger');
            }
        },
        error: function() {
            hideLoading('#stock-loading');
            showAlert('网络错误，请稍后重试', 'danger');
        }
    });
}

function handleIndustryStock(e) {
    e.preventDefault();
    
    showLoading('#industry-loading');
    $('#industry-result').hide();
    
    const formData = {
        input_industry: $('#input_industry').val(),
        top_n: parseInt($('#industry_top_n').val())
    };
    
    $.ajax({
        url: '/api/industry_stock',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(formData),
        success: function(response) {
            hideLoading('#industry-loading');
            
            if (response.success) {
                $('#industry-message').text(response.message);
                $('#industry-table').html(formatTableData(response.data));
                $('#industry-result').show();
                
                // 显示可视化图表
                if (response.chart) {
                                            $('#industry-chartSvg').html(response.chart);
                    $('#industry-chartContainer').show();
                } else {
                    $('#industry-chartContainer').hide();
                }
            } else {
                showAlert(response.error, 'danger');
            }
        },
        error: function() {
            hideLoading('#industry-loading');
            showAlert('网络错误，请稍后重试', 'danger');
        }
    });
}

function handleIndustryExpansion(e) {
    e.preventDefault();
    
    showLoading('#expansion-loading');
    $('#expansion-result').hide();
    
    const formData = {
        input_industry: $('#expansion_industry').val(),
        top_n: parseInt($('#expansion_top_n').val()),
        type: $('#expansion_type').val()
    };
    
    $.ajax({
        url: '/api/industry_expansion',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(formData),
        success: function(response) {
            hideLoading('#expansion-loading');
            
            if (response.success) {
                $('#expansion-message').text(response.message);
                $('#expansion-table').html(formatTableData(response.data));
                $('#expansion-result').show();
                
                // 显示可视化图表
                if (response.chart) {
                                            $('#expansion-chartSvg').html(response.chart);
                    $('#expansion-chartContainer').show();
                } else {
                    $('#expansion-chartContainer').hide();
                }
            } else {
                showAlert(response.error, 'danger');
            }
        },
        error: function() {
            hideLoading('#expansion-loading');
            showAlert('网络错误，请稍后重试', 'danger');
        }
    });
}
</script>
{% endblock %}
